<!doctype html>
<html lang="en">
<head>
<title>Map Demo</title>
<script src="/statics/lib/OpenLayers.js" type="text/javascript"></script>
<link rel="stylesheet" href="/statics/theme/default/style.css"
	type="text/css">
<style>
.map {
	height: 400px;
	width: 100%;
}
</style>
<script type="text/javascript">
	OpenLayers.ProxyHost = "proxy.cgi?url=";
	var map;
	function load() {
		map = new OpenLayers.Map({
			div : "map",
			maxExtent : new OpenLayers.Bounds(145.97161899999998, -43.031944,
					147.219696, -41.775558)
		});
		var political = new OpenLayers.Layer.WMS("State Boundaries",
	            "http://localhost:8080/geoserver/wms", 
	            {'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
	            {isBaseLayer: true}
	        );

	        var roads = new OpenLayers.Layer.WMS("Roads",
	            "http://localhost:8080/geoserver/wms", 
	            {'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
	            {isBaseLayer: false}
	        );

	        var cities = new OpenLayers.Layer.WMS("Cities",
	            "http://localhost:8080/geoserver/wms", 
	            {'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
	            {isBaseLayer: false}
	        );
		var water = new OpenLayers.Layer.WMS("Bodies of Water",
				"http://localhost:8080/geoserver/wms", {
					'layers' : 'topp:tasmania_water_bodies',
					transparent : true,
					format : 'image/gif'
				}, {
					isBaseLayer : false
				});

		map.addLayers([political,  water]); 
//		map.addControl(new OpenLayers.Control.LayerSwitcher());
		if (!map.getCenter()) map.zoomToMaxExtent();
	}
</script>
</head>
<body onload="load()">
	<h2>My Map</h2>
	<div id="map" class="map"></div>

	<p>Open Layer Display Demo.</p>
</body>
</html>